<template>
  <div class="container">
    <div class="title">产品信息</div>
    <div class="contant">
      <el-row>
        <el-col>
          <el-button class="gray-btn" type="primary" @click="addInfo"
            >录入</el-button
          >
          <el-button class="btn" type="primary" @click="editInfo"
            >编辑</el-button
          >
          <el-button class="btn" type="primary">批量删除</el-button>
        </el-col>
      </el-row>
      <div class="table-contant">
        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="产品名称"
            prop="productName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="产品类型"
            prop="productType"
            align="center"
          ></el-table-column>
          <el-table-column
            label="产品发售日期"
            prop="productSellDate"
            align="center"
          ></el-table-column>
          <el-table-column
            label="产品状态"
            prop="productStatus"
            align="center"
          ></el-table-column>
          <el-table-column
            label="证券简称"
            prop="securityAbbreviation"
            align="center"
          ></el-table-column>
          <el-table-column
            label="证券类型"
            prop="securityType"
            align="center"
          ></el-table-column>
          <el-table-column
            label="期限(年)"
            prop="deadline"
            align="center"
          ></el-table-column>
          <el-table-column
            label="发行额(亿)"
            prop="circulation"
            align="center"
          ></el-table-column>
          <el-table-column
            label="发行评级"
            prop="issueRate"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
        style="float: right"
      >
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      destroy-on-close
      width="700px"
    >
      <el-form ref="dialogForm" :model="dialogForm" label-width="180px">
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="dialogForm.productName" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-input v-model="dialogForm.productType" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="产品发售日期" prop="productSellDate">
          <el-date-picker
            v-model="dialogForm.productSellDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品状态" prop="productStatus">
          <el-select
            v-model="dialogForm.productStatus"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in productStatusData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证券简称" prop="securityAbbreviation">
          <el-input
            v-model="dialogForm.securityAbbreviation"
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="证券类型" prop="securityType">
          <el-select
            v-model="dialogForm.securityType"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in securityTypeData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期限(年)" prop="deadline">
          <el-input v-model="dialogForm.deadline" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="发行额(亿)" prop="circulation">
          <el-input v-model="dialogForm.circulation" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="发行评级" prop="issueRate">
          <el-input v-model="dialogForm.issueRate" placeholder="请输入">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
        <el-button type="primary" @click="handleOk" class="gray-btn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      dialogVisible: false,
      productStatusData: [],
      securityTypeData: [],
      tableData: [
        {
          productName: '信用债组合一',
          productType: '信用债',
          productSellDate: '2022-12-12',
          productStatus: '有效',
          securityAbbreviation: '国开002',
          securityType: 'SCP',
          deadline: '1',
          circulation: '1.00',
          issueRate: 'A',
        },
        {
          productName: '信用债组合一',
          productType: '信用债',
          productSellDate: '2022-12-12',
          productStatus: '有效',
          securityAbbreviation: '国开002',
          securityType: 'SCP',
          deadline: '1',
          circulation: '1.00',
          issueRate: 'A',
        },
      ],
      total: 1,
      selectData: [],
      dialogForm: {
        productName: '',
        productType: '',
        productSellDate: '',
        productStatus: '',
        securityAbbreviation: '',
        securityType: '',
        deadline: '',
        circulation: '',
        issueRate: '',
      },
    }
  },
  methods: {
    pageFn() {},
    addInfo() {
      this.title = '新增'
      this.dialogVisible = true
    },
    editInfo() {
      if (this.selectData.length === 1) {
        this.title = '编辑'
        this.dialogVisible = true
        this.dialogForm=this.selectData[0]
      }else{
        this.$message.warning('请选择一条数据')
      }
    },
    handleSelectionChange(val) {
      this.selectData = val
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    font-size: 16px;
    line-height: 40px;
    background: #354060;
    padding: 0 16px;
  }
  .contant {
    padding: 24px;
    .table-contant {
      margin-top: 16px;
      min-height: 500px;
    }
  }
}
::v-deep {
  .el-dialog {
    border-top: 4px solid rgba($color: #1f9bfd, $alpha: 0.9);
    .el-dialog__header {
      border-bottom: 1px solid rgba(126, 163, 255, 0.3);
      padding: 0;
      height: 49px;
      line-height: 49px;
      padding-left: 16px;
    }
    .el-dialog__footer {
      border-top: 1px solid rgba(126, 163, 255, 0.3);
    }
  }
}
</style>
